import React, { Component } from 'react'
import { MyBreadcrumb } from '@/components/myBreadcrumb/index'
import { connect, Dispatch, history } from 'umi'
import { Table,Space,Button,Popconfirm } from 'antd'
import { delectAdminL } from '@/service/people';

// const adminList = [
//     {
//       key: '1',
//       name: '胡彦斌',
//       age: 32,
//       address: '西湖区湖底公园1号',
//     },
//     {
//       key: '2',
//       name: '胡彦祖',
//       age: 42,
//       address: '西湖区湖底公园1号',
//     },
//   ];


class admin extends Component {
    constructor(props:any){
        super(props)
    }
    state={
        adminList:[]
    }
    componentDidMount(){
        this.props.dispatch({
            type:'people/getAdminList'
        })
    }
    render() {
    const { adminList, dispatch } = this.props
    const columns:any = [
            {
              title: '管理员名称',
              align: 'center',
              dataIndex: 'adminname',
              key: 'adminname',
                ellipsis: true,
                width: 80,
            },
            {
              title: '密码(MD5加密)',
              align: 'center',
              dataIndex: 'password',
              key: 'password',
                ellipsis: true,
                width: 80,
            },
            {
              title: '权限',
              align: 'center',
              dataIndex: 'role',
              key: 'role',
                ellipsis: true,
                width: 80,
                render(text:any){
                  return (
                    <div>{text === 1 ? '管理员' : '超级管理员'}</div>
                  )
                }
            },
            {
                title: '管理员id',
                align: 'center',
                dataIndex: 'adminid',
                ellipsis: true,
                key: 'adminid',
                width: 80,
            },
            {
                title: '操作',
                fixed: 'right',
                ellipsis: true,
                width: 120,
                align: 'center',
                render (text:any,record:any,index:any) {
                  return (
                    <Space>
                      <Button type="ghost" onClick={()=>{
                        //   console.log(record);
                          history.push({ pathname: "/people/changeAdmin", query: { adminname:record['adminname'] } })
                      }}>编辑</Button>
                      <Popconfirm
                      title="确定删除吗?"
                      onConfirm={() => {
                        delectAdminL({ adminid: record.adminid }).then(() => {
                            const arr = JSON.parse(JSON.stringify(adminList))
                            arr.splice(index,1)
                            dispatch({
                                type: 'people/UPDATA_ADMIN',
                                payload: arr
                            })
                        })
                        }}
                      okText="确定"
                      cancelText="取消"
                    >
                      <Button danger>删除</Button>
                    </Popconfirm>
                    </Space>
                  )
                }
              }
          ];
        return (
            <>
              <div>
                <MyBreadcrumb/>
                <Button type="ghost" onClick={()=>{
                    history.push('/people/addAdmin')
                }}>添加管理员</Button>
                <Table dataSource={adminList} columns={columns} rowKey="adminid"/>; 
              </div>
            </>
        )
    }
}
export default connect(state=>{
    return {
        adminList: state.people.adminList
    }
})(admin)